/**
 * 主题展示模块
 * 展示Neumorphism主题系统的各种效果
 */

import React from 'react';
import { Card, Row, Col, Typography, Button, Space, Tag, Divider, Alert } from 'antd';
import { BgColorsOutlined, SkinOutlined, FormatPainterOutlined } from '@ant-design/icons';
import { useTheme } from '../../../contexts/ThemeContext';

const { Title, Paragraph, Text } = Typography;

const ThemeShowcase: React.FC = () => {
  const { currentTheme, setTheme, themes } = useTheme();

  // 主题信息
  const themeInfo = {
    light: {
      name: '浅色主题',
      description: '经典的浅色neumorphism设计，适合日间使用',
      colors: ['#ffffff', '#f0f2f5', '#d9d9d9', '#bfbfbf'],
    },
    dark: {
      name: '深色主题', 
      description: '现代的深色neumorphism设计，适合夜间使用',
      colors: ['#1f1f1f', '#262626', '#434343', '#595959'],
    },
    blue: {
      name: '蓝色主题',
      description: '专业的蓝色调neumorphism设计，商务风格',
      colors: ['#e6f7ff', '#bae7ff', '#69c0ff', '#1890ff'],
    },
    purple: {
      name: '紫色主题',
      description: '优雅的紫色调neumorphism设计，创意风格',
      colors: ['#f9f0ff', '#efdbff', '#d3adf7', '#722ed1'],
    },
    tech: {
      name: '科技主题',
      description: '未来感的科技风neumorphism设计，科幻风格',
      colors: ['#0f1419', '#1e2328', '#2d3748', '#4a5568'],
    },
  };

  return (
    <div>
      <Alert
        message="Neumorphism主题系统"
        description="DataPlexus采用现代化的Neumorphism设计语言，提供5种精心设计的主题变体，每种主题都经过精心调优以确保最佳的视觉体验和可用性。"
        type="info"
        showIcon
        style={{ marginBottom: 24 }}
      />

      {/* 当前主题信息 */}
      <Card title="当前主题" style={{ marginBottom: 16 }}>
        <Row gutter={16} align="middle">
          <Col xs={24} sm={12} md={8}>
            <Space direction="vertical">
              <Text strong>主题名称：{themeInfo[currentTheme as keyof typeof themeInfo]?.name}</Text>
              <Text type="secondary">
                {themeInfo[currentTheme as keyof typeof themeInfo]?.description}
              </Text>
            </Space>
          </Col>
          <Col xs={24} sm={12} md={16}>
            <Space>
              <Text strong>主色调：</Text>
              {themeInfo[currentTheme as keyof typeof themeInfo]?.colors.map((color, index) => (
                <div
                  key={index}
                  style={{
                    width: 24,
                    height: 24,
                    backgroundColor: color,
                    borderRadius: 4,
                    border: '1px solid #d9d9d9',
                    display: 'inline-block',
                  }}
                  title={color}
                />
              ))}
            </Space>
          </Col>
        </Row>
      </Card>

      {/* 主题切换器 */}
      <Card title="主题切换" style={{ marginBottom: 16 }}>
        <Paragraph type="secondary">
          点击下方按钮切换不同主题，体验各种视觉效果：
        </Paragraph>
        <Row gutter={[16, 16]}>
          {Object.entries(themeInfo).map(([key, info]) => (
            <Col xs={24} sm={12} md={8} lg={6} key={key}>
              <Card
                size="small"
                hoverable
                onClick={() => setTheme(key as any)}
                style={{
                  border: currentTheme === key ? '2px solid #1890ff' : '1px solid #d9d9d9',
                  cursor: 'pointer',
                }}
              >
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Text strong>{info.name}</Text>
                    {currentTheme === key && <Tag color="blue">当前</Tag>}
                  </div>
                  <Space>
                    {info.colors.map((color, index) => (
                      <div
                        key={index}
                        style={{
                          width: 16,
                          height: 16,
                          backgroundColor: color,
                          borderRadius: 2,
                          border: '1px solid #d9d9d9',
                        }}
                      />
                    ))}
                  </Space>
                  <Text type="secondary" style={{ fontSize: 12 }}>
                    {info.description}
                  </Text>
                </Space>
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

      {/* 组件效果展示 */}
      <Card title="组件效果展示" style={{ marginBottom: 16 }}>
        <Row gutter={16}>
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="按钮组件">
              <Space direction="vertical" style={{ width: '100%' }}>
                <Button type="primary" block>主要按钮</Button>
                <Button block>默认按钮</Button>
                <Button danger block>危险按钮</Button>
                <Button type="dashed" block>虚线按钮</Button>
              </Space>
            </Card>
          </Col>
          
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="标签组件">
              <Space wrap>
                <Tag color="default">默认</Tag>
                <Tag color="blue">蓝色</Tag>
                <Tag color="green">绿色</Tag>
                <Tag color="orange">橙色</Tag>
                <Tag color="red">红色</Tag>
                <Tag color="purple">紫色</Tag>
              </Space>
            </Card>
          </Col>
          
          <Col xs={24} sm={12} md={8}>
            <Card size="small" title="文本组件">
              <Space direction="vertical">
                <Text>普通文本</Text>
                <Text strong>加粗文本</Text>
                <Text type="secondary">次要文本</Text>
                <Text type="success">成功文本</Text>
                <Text type="warning">警告文本</Text>
                <Text type="danger">危险文本</Text>
              </Space>
            </Card>
          </Col>
        </Row>
      </Card>

      {/* Neumorphism效果展示 */}
      <Card title="Neumorphism效果展示">
        <Paragraph type="secondary">
          以下展示了Neumorphism设计的核心特征：柔和的阴影、内嵌效果和立体感：
        </Paragraph>
        
        <Row gutter={16}>
          <Col xs={24} sm={8}>
            <div
              style={{
                padding: '20px',
                borderRadius: '12px',
                background: currentTheme === 'dark' ? '#1f1f1f' : '#f0f2f5',
                boxShadow: currentTheme === 'dark' 
                  ? 'inset 5px 5px 10px #0d0d0d, inset -5px -5px 10px #313131'
                  : 'inset 5px 5px 10px #d1d5db, inset -5px -5px 10px #ffffff',
                textAlign: 'center',
                marginBottom: 16,
              }}
            >
              <Text strong>内嵌效果</Text>
              <br />
              <Text type="secondary">Inset Shadow</Text>
            </div>
          </Col>
          
          <Col xs={24} sm={8}>
            <div
              style={{
                padding: '20px',
                borderRadius: '12px',
                background: currentTheme === 'dark' ? '#1f1f1f' : '#f0f2f5',
                boxShadow: currentTheme === 'dark'
                  ? '5px 5px 10px #0d0d0d, -5px -5px 10px #313131'
                  : '5px 5px 10px #d1d5db, -5px -5px 10px #ffffff',
                textAlign: 'center',
                marginBottom: 16,
              }}
            >
              <Text strong>凸起效果</Text>
              <br />
              <Text type="secondary">Raised Shadow</Text>
            </div>
          </Col>
          
          <Col xs={24} sm={8}>
            <div
              style={{
                padding: '20px',
                borderRadius: '12px',
                background: currentTheme === 'dark' ? '#262626' : '#ffffff',
                boxShadow: currentTheme === 'dark'
                  ? '3px 3px 6px #0d0d0d, -3px -3px 6px #3f3f3f'
                  : '3px 3px 6px #d1d5db, -3px -3px 6px #ffffff',
                textAlign: 'center',
                marginBottom: 16,
              }}
            >
              <Text strong>平面效果</Text>
              <br />
              <Text type="secondary">Flat Shadow</Text>
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default ThemeShowcase;
